<template>
    <BoxBorder13
        :colors="['#6586ec' ,'#2cf7fe']"
        class="bigDataCard"
    >
        <div class="header">
            <div class="title">各单位视频接入数量统计</div>
        </div>
        <div class="body" ref="bodyRef">
            <VChart ref="chartRef" :option="mapOptions" :style="{ height: height }"/>
        </div>
    </BoxBorder13>
</template>

<script setup>
import {BoxBorder13} from "guodu-data-panel";
import VChart from "vue-echarts";
import {useTemplateRef} from "vue";
import {use} from "echarts";
import {GridComponent, LegendComponent, TitleComponent, TooltipComponent} from "echarts/components";
import {BarChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";
import {randomNumberInRange} from "@/utils/utils.js";
import {getVideoCountByUnit} from "@/api/CenterScreen/CenterScreen.js";


const bodyRef = useTemplateRef('bodyRef')
const height = ref('')

const mapOptions = ref({})

use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

let intervalId;
onMounted(() => {
    nextTick(() => {
        height.value = bodyRef.value.clientHeight
    });

    getData()

    // 设置定时器，每10秒获取一次数据
    intervalId = setInterval(getData, 2 * 60 * 1000);
})

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId);
    }
})

const getData = async () => {
    const res = await getVideoCountByUnit()
    const {data} = res
    const deptNames = data.map(item => item.depName)
    const series = data.map(item => item.videoCount)
    setChartOptions(deptNames, series)
}
const setChartOptions = (deptNames, series) => {
    mapOptions.value = {
        grid: {
            left: 0,
            right: 0,
            top: 10,
            bottom: 0,
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {
                const city = params[0].name;
                const value = params[0].value;
                return `${city}: ${value}`;
            }
        },
        xAxis: {
            show: false
        },
        yAxis: {
            inverse: true,
            type: 'category',
            data: deptNames,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitArea: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                interval: 0,
                color: '#fefefe'
            },
        },
        series: {
            realtimeSort: true,
            name: 'video category',
            type: 'bar',
            barWidth: 2,
            data: series,
            itemStyle: {

                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: 'rgba(0, 77, 167, 1)' // 开始颜色
                    }, {
                        offset: 1, color: 'rgba(0, 244, 255, 1)' // 结束颜色
                    }]
                },
            },
            // 圆角设置
            barBorderRadius: [20, 20, 20, 20] // 左上、右上、右下、左下的圆角半径
        }
    }
}
</script>

<style scoped lang="scss">

</style>